/*
  学习目标：使用children属性，模拟Vue中的插槽
  1. 默认插槽
  2. 具名插槽 - 传递对象，对象内有对应的属性名
  3. 作用域插槽
    作用域插槽,本质上传递函数，函数留下形参，子组件传递过来即可获取到子组件的数据
*/

import React from 'react';
class App extends React.Component {
  render() {
    return (
      <div>
        我是app父组件
        {/* 1. 默认插槽，传递了什么数据，就渲染什么 */}
        <Child>我是child里面的字符串</Child>
        {/* 2. 具名插槽 - 传递对象，对象内有对应的属性名 */}
        <ChildHasName>
          {{ header: '床前明月光', footer: '疑是地上霜' }}
        </ChildHasName>
        {/* 3. 作用域插槽 - 传递函数，函数留下形参，子组件传递过来即可获取到子组件的数据 */}
        <ChildScope>{(data) => data}</ChildScope>
      </div>
    );
  }
}

class ChildScope extends React.Component {
  render() {
    // console.log('this.props.children -----> ', this.props.children(100));
    return <div>我是作用域插槽 - {this.props.children(100)}</div>;
  }
}
class Child extends React.Component {
  render() {
    return <div>我是Child子组件 - {this.props.children}</div>;
  }
}
class ChildHasName extends React.Component {
  render() {
    // console.log('this.props.children -----> ', this.props.children);
    return (
      <div>
        <div>header插槽内容: {this.props.children.header}</div>
        <div>footer插槽内容: {this.props.children.footer}</div>
      </div>
    );
  }
}

export default App;
